<template>
	<div class="Find">
		<div class="find" v-if="arrData">
			<div class="header">
				<li v-for="(item,index) in arrData" @click="routeActive(index)">
					<span :class="{liActive:iNum==index}">
					{{item.moduleName}}
				</span>
				</li>
			</div>
			<div class="content">
				<div class="main" v-for="item in arrMain" @click="marketUrl(item.productUrl)">
					<div class="main_left"> <img :src="item.productImg" /></div>
					<div class="main_center">
						<b>{{item.productName}}</b>
						<p>{{item.productSlogan}}</p>
					</div>
					<div class="main_right">
						<span>{{item.num}}</span>
						<p>今日放款人数</p>
					</div>
				</div>
			</div>
		</div>
		<div class="find_s" v-else>
			<img src="./../assets/img/emptypage_building.png" />
			<p>后台数据返回为空！</p>
		</div>
	</div>

</template>
<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	export default {
		name: "find",
		data() {
			return {
				arrData: "",
				arrMain: "",
				iNum: 0
			}
		},
		computed: {
			...mapState(["marketApi"])
		},
		mounted() {
			const that = this;
			this.ajaxData(that);
		},
		methods: {
			ajaxData(that) {
				this.$ajax({
					method: "post",
					url: that.marketApi + "/market/product_list",
					dataType: "json"
				}).then((res) => {
					if(!res.data.data) {
						that.arrData = res.data.data;
						that.arrMain = that.arrData[0].list;
						if(that.arrData.length == 1) {
							this.iNum = 1;
						};
					}
				})
			},
			routeActive(index) {
				if(this.arrData.length != 1) {
					this.iNum = index;
					this.arrMain = this.arrData[index].list;
				};
			},
			marketUrl(url) {
				if(url.indexOf('http') != -1) {
					this.$router.push({
						name: 'register',
						params: {
							id: url
						}
					});
				} else {
					mui.alert("无效链接!");
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.Find {
		width: 100%;
		height: 100%;
		.find {
			width: 100%;
			background-color: #efeff4;
			box-sizing: border-box;
			.header {
				width: 100%;
				height: 45px;
				display: flex;
				justify-content: space-around;
				background: white;
				li {
					width: 50%;
					height: 100%;
					text-align: center;
					line-height: 45px;
					font-weight: bold;
					font-size: 18px;
					color: #000;
				}
				.liActive {
					font-size: 18px;
					color: #5182E4;
					border-bottom: 2px solid #5182E4;
				}
			}
			.content {
				width: 100%;
				overflow: auto;
				box-sizing: border-box;
				.main {
					width: 100%;
					height: 86px;
					margin-top: 10px;
					padding-left: 15px;
					box-sizing: border-box;
					border-radius: 4px;
					background: white;
					img {
						width: 48px;
						height: 48px;
					}
					div {
						height: 48px;
						float: left;
						font-size: 12px;
						color: #999999;
						margin-top: 20px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
					.main_center {
						width: 180px;
						margin-left: 10px;
						b {
							font-size: 16px;
							color: #333333;
						}
						p {
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
					.main_right {
						border-left: 1px solid #CCCCCC;
						padding-left: 15px;
						span {
							font-size: 24px;
							color: #F56923;
						}
					}
				}
			}
		}
		.find_s {
			width: 100%;
			height: 100%;
			text-align: center;
			img {
				width: 100px;
				margin-top: 45%;
				margin-bottom: 25px;
			}
			p {
				font-size: 18px;
				font-weight: bold;
				color: red;
			}
		}
	}
</style>